Tutorial #2: Resize window action

Now you will create a slightly more complicated action, one that requires input values and passes this info to the JavaScript code for handling.

1 Duplicate an existing action and this time save it as, ResizeWindow.action.

2 Change the action title to Resize Window Action.

3 Now define the action class. Click on the <csactionclass> tag to bring up the Inspector and view its attributes. The first attribute is NAME. In this example you will enter "Resize Window" as the value.

4 Now you'll define the FUNCTION. Enter "CSResizeWindow," which will correspond to the function you'll create for the JavaScript in step 7, ResizeWindow().

5 Since the resizeTo() method only works in 4.0 browsers, you should enter 4 for both the Netscape and Internet Explorer versions for the next two attributes.

6 This action uses two parameters or arguments, one for the width of the new window, and one for the height. The actual JavaScript function you'll use is window.ResizeTo(x,y), where x stands for the new width and y the new height. What you want to create is a dialog box that lets the user enter in the new width and height directly into the Inspector.

The way this is accomplished is by using the <csactionparam> tag. Click on the first <csactionparam> tag to view its attributes.

There are only two attributes here, but numerous possible values. For the NAME attribute you will need to select a name which will correspond to the field where the user will enter that value. So in this case you will enter "x" for width. The TYPE attribute allows you to define the type of dialog box element the user will use for input. If you look back at the list of parameter types you'll see that an editable text field for entering numbers is the GLActionNumParam. Enter this as the value for the TYPE attribute.

Now you'll need a second <csactionparam> tag to correspond to the height field. Copy and paste this tag to duplicate it, then highlight it to bring up the Inspector. Now you just need to change the NAME attribute value to "y" and leave the TYPE as is since this will also be an editable number field.

7 In this step you will enter the JavaScript code. First rename the script to "Resize Window Script" and double-click on it to open up the JavaScript editor. Enter in the following code:

function CSResizeWindow(action) { window.resizeTo (action[1],action[2]) }

In this example you include two array values, action[1] corresponds to "x" and action[2] corresponds to "y." So essentially you are saying, when the CSResizeWindow () function executes, execute the function window.resizeTo(x,y), where "x" is the value entered for width and "y" is the value entered for height. Had you entered a width and height of 640 by 480, the code would evaluate as:

function CSResizeWindow(action) { window.resizeTo (640,480) }

Now here comes the caveat! Welcome to the world of cross-browser JavaScripting! If you test the preceding script in Netscape 4 on Mac and PC it works fine. In Internet Explorer 4 on Windows, it works fine but on the Macintosh it doesn't do anything. Worse, in the 3.0 browsers the script will generate an error. While not executing the action might be tolerable, generating an error is not, so you'll now add some code to prevent errors in earlier browsers. As a rule, you should carefully design your actions so that they don't generate errors in any browser, this holds true for both Mac and PC platforms. And of course the more browsers your action works with the more useful it will be to the end user.

Since the script only produces errors in 3.0 browsers, you need to add a statement which instructs the script to execute only if the user is surfing with a 4.0 or above browser. For earlier browsers the script will just be ignored. For this we can use the appVersion property to determine the browser version and include this in an if () statement. Any function included in the curly brackets of this script will only execute if the browser version is greater than or equal to 4:

if (navigator.appVersion.charAt(0) >=4) { }

So you would then modify the script to:

function CSResizeWindow(action) { if (navigator.appVersion.charAt(0) >=4) { window.resizeTo (action[1],action[2]) } }

8 The last step in creating this action is to modify the layout grid for the Inspector content. You'll need two input fields corresponding to width and height. These fields will hold the values of x (action[1])and y (action[2]). Click on the existing input field to bring up the Inspector. Choose Param Name from the pulldown menu and name it "x" (no quotes). Now duplicate the tag using Ctrl-drag (Windows) or Option-drag (Mac OS) or copy and paste. Change the name on the copy to "y." You can also add the descriptive text by clicking on the descriptive text field and choosing "Static text" from the pulldown menu. Static text is text which doesn't change, in this case you will have two fields, one which says width and the other height, directly to the left of the input fields.

Creating Actions > Action tutorials > Tutorial #2: Resize window action